<template>
    <div class="common-layout">
        <el-container>
            <!-- 选择班组 -->
            <el-aside width="120px" class="radio">
                <el-radio-group v-model="name" @change="onSelected">
                    <el-radio-button v-for="item in teams" :key="item.teamId" :label="item.teamId" :value="item.teamId">
                        {{ item.teamName }}
                    </el-radio-button>
                </el-radio-group>
            </el-aside>

            <!-- 排班日历 -->
            <el-main>
                <el-calendar v-model="date" class="custom-calendar">
                    <template v-slot:date-cell="{ date, data }">
                        <div>
                            <el-row style="height: 75px;">
                                <el-col :span="16">
                                    <div class="solar">
                                        {{ data.day.split('-')[2] }}
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <el-tag v-if="holidays.indexOf(data.day) == -1" effect="dark">班</el-tag>
                                    <el-tag v-else effect="dark" type="success">休</el-tag>
                                </el-col>
                            </el-row>


                            <el-row v-for="typeDay in typeDays">
                                <div v-for="day in typeDay.days">
                                    <el-col :span="24" v-if="day == data.day && typeDay.days.indexOf(data.day) != -1" style="margin-top: -35px; margin-left: 6px;">
                                        <div v-for="shiftTeam in shiftTeams" class="grid-content">
                                            <el-button
                                                v-if="shiftTeam.planId == typeDay.planId && shiftTeam.teamName == name"
                                                type="warning" style="width: 120px;">
                                                {{ shiftTeam.teamName }}
                                            </el-button>
                                        </div>
                                    </el-col>
                                </div>
                            </el-row>
                        </div>
                    </template>
                </el-calendar>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import holidayRequest from '../../../api/cal-holiday.js';
import planRequest from '../../../api/cal-plan.js';
import teamRequest from '../../../api/cal-team.js';
import teamShiftRequest from '../../../api/cal-teamShift.js';
export default {
    data() {
        return {
            //班组信息
            teams: [],
            //点击的班组名字
            name: "",
            //点击的班组类型
            teamType: "",
            //现在时间
            date: new Date(),
            //查询的节假日
            holidays: [],
            //计划有排班的日期
            typeDays: [],
            //计划班组的信息
            shiftTeams: [],
        }
    }, methods: {
        onSelected(type) {
            //班组类型
            // let teamType="";
            //根据Id查询班组数据
            teamRequest.selectByTeamId(type, res => {
                this.teamType = res.data.teamTypeId;
                this.name = res.data.teamName;
                //获取分类在那个日期中有排班
                planRequest.selectByType(this.teamType, res => {
                    this.typeDays = res.data;
                    for (let index = 0; index < this.typeDays.length; index++) {
                        this.typeDays[index].days = [];
                    }
                    //存储时间范围的全部日期
                    let arr = []
                    let v = 0;
                    this.typeDays.forEach(day => {
                        let str_b = day.startDate.split('-')
                        let str_e = day.endDate.split('-')
                        let date_b = new Date()
                        date_b.setUTCFullYear(str_b[0], str_b[1] - 1, str_b[2])
                        let date_e = new Date()
                        date_e.setUTCFullYear(str_e[0], str_e[1] - 1, str_e[2])
                        let unixDb = date_b.getTime() - 24 * 60 * 60 * 1000
                        let unixDe = date_e.getTime() - 24 * 60 * 60 * 1000

                        for (let j = unixDb; j <= unixDe;) {
                            j = j + 24 * 60 * 60 * 1000
                            this.typeDays[v].days.push(this.timestampToTime(new Date(parseInt(j))))
                        }
                        v++;
                    });
                })
            });
            // 获取计划班组信息
            teamShiftRequest.select(res => {
                this.shiftTeams = res.data;
            })
        },
        /**
         * 日期处理
         */
        timestampToTime(date) {
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
            return Y + M + D;
        },
        /**
         * 查询假日
         */
        loadHoliday() {
            holidayRequest.list(res => {
                this.holidays = [];
                res.data.forEach(day => {
                    const dt = new Date(day.theDay);
                    const y = dt.getFullYear();
                    const m = (dt.getMonth() + 1 + '').padStart(2, '0');
                    const d = (dt.getDate() + '').padStart(2, '0');
                    let tiem = y + "-" + m + "-" + d;
                    this.holidays.push(tiem)
                });
            });
        },
        /**
         * 获取班组类型
         */
        loadTeams() {
            teamRequest.getList(res => {
                this.teams = res.data;
            });
        },
    }, mounted() {
        this.loadTeams();//班组类型
        this.loadHoliday();//查询假日
    }
}
</script>
<style>
.radio {
    margin-left: -10px;
    background-color: #DCDFE6;
    padding: 10px 5px;
}

.radio .el-radio-group {
    display: flex;
    justify-content: center;
    margin: -3px 0;
}

.el-calendar-table .el-calendar-day {
    height: calc(100%);
}
</style>